import { defineComponent, reactive, ref } from "vue";
//todo debounce不生效 const context = this;
export default defineComponent({
	props: {
		tableData: Object, // 确保类型匹配
	},
	setup(props, { emit }) {
		let searchList = [];
		let valueList = reactive({});
		props.tableData.clums.forEach((item) => {
			item.search && (searchList.push(item), (valueList[item.search.key || item.props] = null));
		});
		// var debounce = (func, wait) => {
		// 	let timeout;
		// 	//获取到
		// 	console.log("debounce", func, wait);
		// 	return function (...args) {
		// 		const context = this;
		// 		if (timeout) clearTimeout(timeout);
		// 		timeout = setTimeout(() => {
		// 			func.apply(context, args);
		// 		}, wait);
		// 	};
		// };
		// console.log("0099", searchList, valueList);
		return () => (
			<div className="queryPart" style={{ display: "flex", alignItems: "center", padding: "2px 0 0 2px" }}>
				{searchList.length > 0 &&
					searchList.map((item) => {
						switch (item.search.type) {
							case "input":
								return (
									<div class="queryBox">
										<el-input class="queryItem" v-model={valueList[item.search.key || item.props]} placeholder={item.search.placeholder} maxlength={item.search.maxLength} clearable={item.search.clearable || true} />
									</div>
								);
							case "select":
								return (
									<div class="queryBox">
										<el-select class="queryItem" v-model={valueList[item.search.key || item.props]} placeholder={item.search.placeholder} clearable={item.search.clearable || true}>
											{item.search.optionList.map((item) => {
												return <el-option key={item.value} label={item.label} value={item.value} />;
											})}
										</el-select>
									</div>
								);
							case "multSelect":
								return (
									<div class="queryBox">
										<el-select multiple collapse-tags class="queryItem" v-model={valueList[item.search.key || item.props]} placeholder={item.search.placeholder} clearable={item.search.clearable || true}>
											{item.search.optionList.map((item) => {
												return <el-option key={item.value} label={item.label} value={item.value} />;
											})}
										</el-select>
									</div>
								);
							case "datetime":
								return (
									<div class="queryBox">
										<el-date-picker class="queryItem" v-model={valueList[item.search.key || item.props]} type="datetime" placeholder={item.search.placeholder} value-format={item.search.timeFormatter} clearable={item.search.clearable || true} />
									</div>
								);
							case "timerange":
								return (
									<div class="queryBox">
										<el-date-picker class="queryItem-b" value-format={item.search.timeFormatter} v-model={valueList[item.search.key || item.props]} type="datetimerange" start-placeholder={item.search.startPlaceholder || "开始时间"} range-separator={item.search.separator || "-"} end-placeholder={item.search.endPlaceholder || "结束时间"} clearable={item.search.clearable || true} />
									</div>
								);
							case "cascader":
								return (
									<div class="queryBox">
										<el-cascader v-model={valueList[item.search.key || item.props]} props={item.search.propset} options={item.search.optionList} placeholder={item.search.placeholder} clearable={item.search.clearable || true} />
									</div>
								);
							default:
								break;
						}
					})}
				<div class="queryBox">
					<el-button
						type="primary"
						// onClick={() => {
						// 	console.log("click");
						// 	console.log("debouce:",debounce);
						// 	debounce(() => {
						// 		console.log("debounce", Date.now());
						// 		emit("handleSearch", valueList);
						// 	}, 3000);
						// }}
						v-debounce={() => {
							emit("handleSearch", valueList);
						}}
					>
						查询
					</el-button>
				</div>

				<div class="queryBox">
					<el-button
						type="info"
						color="rgba(231, 231, 231, 1)"
						v-debounce={() => {
							for (let key in valueList) {
								valueList[key] = null;
							}
							console.log("queryBox", valueList);
							emit("handleReset", valueList);
						}}
					>
						重置
					</el-button>
				</div>
			</div>
		);
	},
});
